<template>
<div class="order-list-page">
  <div class="container-big">
    <div class="page-content">
      <div class="alibaba-design" />
      <div class="uncan-2019-text" />
      <div class="uncan-right" />
      <co-list
        margin
        class="order-list"
      >
        <co-list-item link :to="{path: '/orderDetail', query: { orderId: item.orderId }}" v-for="(item, index) in list" :key="item.orderId+index">
          <div
            slot="prev"
            class="order-list-item"
          >
            <div class="order-list-item-highlight" />
            <div class="order-list-item-content">
              <div class="order-list-item-status">
                {{formatStatusText(item.status)}}
              </div>
              <div class="order-list-item-info">
                <div v-if="item.status === 0" class="item-info-message">
                  剩余时长 {{formatCountDownTime(item.createTime)}}
                </div>
                <div v-if="item.status !== 0" class="item-info-message">
                  下单时间 {{formatCreateTime(item.createTime)}}
                </div>
                <div class="item-info-message">
                  x{{item.num}} 张 合计 ¥<strong>{{item.money}}</strong>
                </div>
              </div>
              <!-- <div class="item-info-pay-message">
                已申请电子发票
              </div> -->
            </div>
          </div>

          <span class="order-no-label">
            订单号
          </span>
          {{item.billlcode}}
        </co-list-item>
      </co-list>
    </div>
  </div>
</div>
</template>
<script>
import services from '../../api/profile';

const addZero = value => value > 9 ? value : `0${value}`;

export default {
  data() {
    return {
      list: [],
      loading: false,
      now: new Date().getTime()
    };
  },
  mounted () {
    this.loadOrderList();
    this.startCountDown();
  },
  beforeDestroy () {
    this.clearCountDown();
  },
  methods: {
    startCountDown () {
      this.clearCountDown();
      this.timer = setInterval(() => {
        this.now = new Date().getTime();
      }, 1000);
    },
    clearCountDown () {
      if (this.timer) clearInterval(this.timer);
    },
    formatCountDownTime (time) {
      time = new Date(time || new Date().getTime());
      const max = 30 * 60 * 1000;
      const has = max - (this.now - time);
      if (has <= 0) {
        this.loadOrderList();
      }

      const hours = Math.floor(has / (60 * 60 * 1000));
      const minutes = Math.floor((has %  (60 * 60 * 1000)) / (60 * 1000))
      const seconds = Math.floor((has % (60 * 60 * 1000) % (1000 * 60)) / 1000)
      return `${addZero(hours)}:${addZero(minutes)}:${addZero(seconds)}`;
    },
    formatStatusText (status) {
      return ['待支付', '交易成功', '交易关闭', '支付失败', '已退款'][Number(status)];
    },
    formatCreateTime (time) {
      time = new Date(time || new Date().getTime());
      return `${time.getFullYear()}:${addZero(time.getMonth() + 1)}:${addZero(time.getDate())} ${addZero(time.getHours())}:${addZero(time.getMinutes())}:${addZero(time.getSeconds())}`
    },
    loadOrderList () {
      if (this.loading) return;
      this.loading = true;
      services.getOrderList().then((data) => {
        this.loading = false;
        this.list = data;
      }).catch(() => {
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="less">
.order-list-page {
  position: relative;
  height: 100%;
  .page-content {
    position: relative;
    padding-top: 196px;
    padding-left: 30px;
    padding-right: 30px;
  }
  .order-no-label {
    margin-right: 50px;
  }

  .order-list {
    .co-list-item {
      margin: 0;
      margin-bottom: 16px;
    }
  }

  .order-list-item {
    background: #282B31;
    overflow: hidden;
    border-top-left-radius: 4px; /*no*/
    border-top-right-radius: 4px; /*no*/
  }

  .order-list-item-highlight {
    opacity: 0.8;
    background-image: linear-gradient(67deg, #FD592C 0%, #A802BD 44%, #5803E4 91%);
    height: 8px;
  }

  .order-list-item-content {
    padding: 24px 20px;
    text-align: left;
  }
  .order-list-item-status {
    font-size: 32px;
  }

  .order-list-item-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }

  .item-info-message,
  .item-info-pay-message {
    font-size: 20px;
    > strong {
      font-size: 32px;
      font-weight: normal;
    }
  }

  .item-info-pay-message {
    margin-top: 10px;
  }
}
</style>
